<template>
	<div>
		<picker 
		mode="multiSelector"  
		:range-key="'label'" 
		@change="confirm"
			@columnchange="columnchange" :range="multiSelector">
			<div style="font-size: 24rpx;color:#9E9E9E;" v-if="loading">{{$t('加载中')}}...</div>
			<div style="font-size: 24rpx;" v-else-if="!loading&&text">{{text}}</div>
			<div style="font-size: 24rpx;color:#9E9E9E;" v-else @click="show=!show">{{$t('请选择')}}</div>
		</picker>
	</div>
</template>

<script>
	export default {
		props: ["text"],
		data() {
			return {
				lang: this.$i18n.locale,
				refresh: 0,
				loading: false,
				defaultselector: [0, 0, 0],
				show: false,
				multiSelector: [
					[],
					[],
					[]
				],
			}
		},
		created() {
			this.getList(0, 0);
		},
		methods: {
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
			change(e) {
				console.log(e);
			},
			getList(pid, column) {
				this.loading = true;
				uni.request({
					url: "https://app.gluz.com.cn/api/basic/getSelectCityList",
					data: {
						is_port: true,
						pid,
						lang:this.lang
					},
					success: res => {
						const data = res.data.data;
						if (res.data && data && data[0]) {
							this.multiSelector[0] = data;
							this.multiSelector[1] = data[0].children;
							this.multiSelector[2] = data[0].children[0].children;
						}
						this.loading = false;
					}
				})
			},
			confirm(e) {
				const [column1Index, column2Index, column3Index] = e.detail.value;

				if (this.multiSelector[0][column1Index].value == -2) return
				this.$emit("confirm", {
					column1: {
						label: this.multiSelector[0][column1Index].label,
						label_ru: this.multiSelector[0][column1Index].label_ru,
						value: this.multiSelector[0][column1Index].value
					},
					column2: {
						label: this.multiSelector[1][column2Index].label,
						label_ru: this.multiSelector[1][column2Index].label_ru,
						value: this.multiSelector[1][column2Index].value
					},
					column3: {
						label: this.multiSelector[2][column3Index].label,
						label_ru: this.multiSelector[2][column3Index].label_ru,
						value: this.multiSelector[2][column3Index].value
					}
				})
			},
			columnchange(e) {
				const {
					column,
					value: index
				} = e.detail;
				this.defaultselector[column] = index
				if (column === 0) {
					this.multiSelector[column + 1] = this.multiSelector[0][index].children
					this.multiSelector[column + 2] = this.multiSelector[1][0].children
				} else if (column === 1) {
					this.multiSelector[column + 1] = this.multiSelector[1][index].children
				}
			}
		}
	}
</script>

<style lang="scss">

</style>